// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.circular-progress {
  @_top: circular-progress;

  @size: 31px; // same height as .btn-osu-big
  @thickness: 0.1em;
  @label-size: 0.4em;

  .over50() {
    --circle-fill-transform: rotate(0.5turn);
    --slice-clip: rect(auto, auto, auto, auto);
  }

  font-size: @size;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  pointer-events: auto;

  background-color: @osu-colour-b4;
  --circle-center-fill: @osu-colour-b6;
  --circle-transform: rotate(0turn);
  --circle-fill-transform: rotate(0turn);
  --slice-clip: rect(0em, 1em, 1em, 0.5em);
  --circle-border-colour: hsl(var(--hsl-h1));
  --label-colour: hsl(var(--hsl-h1));
  --label-display: block;

  &--warn {
    --circle-border-colour: hsl(var(--hsl-orange-2));
    --label-colour: hsl(var(--hsl-orange-2));
  }

  &--over {
    --circle-border-colour: hsl(var(--hsl-red-2));
    --label-colour: hsl(var(--hsl-red-2));
  }

  &--lighter {
    background-color: @osu-colour-b3;
    --circle-center-fill: @osu-colour-b5;
  }

  &--over50 {
    .over50();
  }

  &--beatmapset-panel {
    font-size: 50px; // circle size
    pointer-events: none;
    background-color: transparent;
    --circle-center-fill: transparent;
    --label-display: none;
    --circle-transform: rotate(calc(var(--progress) * 1turn));

    [data-audio-over50="1"] & {
      .over50();
    }
  }

  &--gallery-contest {
    --circle-border-colour: #fff;
    --label-colour: #fff;
  }

  &::after {
    position: absolute;
    margin-top: @thickness;
    margin-left: @thickness;
    display: block;
    content: "";
    border-radius: 50%;
    background-color: var(--circle-center-fill);
    width: 1em - (@thickness * 2);
    height: 1em - (@thickness * 2);
  }

  &__label {
    position: absolute;
    z-index: 1;
    width: (1 / @label-size);
    line-height: (1 / @label-size);
    font-size: @label-size;
    text-align: center;
    white-space: nowrap;
    color: var(--label-colour);
    display: var(--label-display);
  }

  &__circle {
    position: absolute;
    border: @thickness solid var(--circle-border-colour);
    width: 1em;
    height: 1em;
    clip: rect(0em, 0.5em, 1em, 0em);
    border-radius: 50%;
    transform: var(--circle-transform);

    &--fill {
      transform: var(--circle-fill-transform);
    }
  }

  &__slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: var(--slice-clip);
  }
}
